<template>
  <div>{{ newuser }}</div>
  <div>
    <el-button type="success" @click="changeName"> 点击改变姓名 </el-button>
  </div>
</template>

<script setup>
import { ref, watch, reactive, watchEffect } from "vue";

// 使用 watchEffect 监听数据
const userinfo = reactive({
  name: "李四",
  info: {
    age: 18,
    height: 180,
  },
});
let newuser = ref('');

// 点击按钮改变对象值
const changeName = () => {
  userinfo.info.age++;
};

// 根据 userinfo 对象的值拼接字符串
const printUser = () => {
  newuser.value += `${userinfo.name}今年${userinfo.info.age}岁 \n`;
};

// 使用 watchEffect 进行数据监听
watchEffect(() => {
  console.log('监听到变化');
  // 自动调用方法并获取依赖
  // 依赖发生变化后执行方法
  printUser();
});

/**
 * // 监听 reactive 类型的数据
// 初始化 reactive 类型的数据
const userinfo = reactive({
  name: "张三",
  age: 18,
});

// 倒计时1秒改变name值
setTimeout(() => {
  userinfo.name = "李四";
}, 1000);

// 添加一个方法用来返回要监听的依赖
const watchname = () => {
  return userinfo.name;
};

// 监听 userinfo 里面的 name 方法
watch(watchname, (newval, oldval) => {
  // 倒计时1秒后执行下面的打印
  console.log(oldval, "变化前的值"); // => 张三 "变化前的值"
  console.log(newval, "变化后的值"); // => 李四 "变化后的值"
});
 */

/**
 * // watch 监听 ref 类型的数据
let name = ref(null);

// 倒计时1秒改变name的值
setTimeout(() => {
  name.value = "Lisi";
}, 1000);

// 监听 name 变量
watch(name, (newval, oldval) => {
  // 倒计时1秒后执行下面的打印
  console.log(oldval, "变化前的值"); // => null
  console.log(newval, "变化后的值"); // => Lisi
});
 */
</script>
